<template>
  <view class="container">
    <!-- 文本域 -->
    <view style="position: relative; top: 0; left: 0">
      <textarea v-model="content" class="txt" maxlength="200" placeholder="请输入您的想法~"></textarea>
      <view style="position: absolute; bottom: 24rpx; right: 24rpx; font-weight: 400; font-size: 24rpx; color: #cccfdb">{{ content.length }}/200</view>
    </view>
    <!-- 上传图片 -->
    <view style="font-weight: 400; font-size: 24rpx; color: #666666; padding: 48rpx 0rpx">上传照片/视频(照片9张或一段视频)</view>
    <view>
      <cl-upload
        v-model="urls"
        :action="url"
        :headers="{
          token: token
        }"
        fileType="all"
        :closeImg="true"
        fileName="file"
        :useBeforeDelete="true"
        @beforeDelete="beforeDelete"
        @onSuccess="onSuccess"
      ></cl-upload>
      <!-- <image src="../../static/upload.png" style="width: 200rpx; height: 200rpx" mode=""></image> -->
    </view>
    <!-- 选择位置 -->
    <view class="address" @click="getLocation({}, 'area_id', 'address')">
      <view style="display: flex; align-items: center">
        <image src="../../static/loginimg/position.png" style="width: 26rpx; height: 30rpx; margin-right: 12rpx" mode=""></image>
        <view>所在位置 {{ address }}</view>
      </view>
      <uni-icons type="right" size="20"></uni-icons>
    </view>
    <view class="btn">
      <view class="creatact" @click="fabuDongtai">发布</view>
    </view>
  </view>
</template>

<script>
import { mapState } from 'vuex';
import { getLocation, formatLocation } from '@/common/adres.js';
export default {
  data() {
    return {
      url: '',
      //上传的图片地址列表
      urls: [],
      banurl: [],
      address: '',
      content: ''
    };
  },
  computed: {
    ...mapState(['token'])
  },
  onLoad() {
    this.url = this.$uploadUrl;
  },
  methods: {
    //选择图片
    beforeDelete(item, index, next) {
      this.banurl.splice(index, 1);
      this.urls.splice(index, 1);
    },
    onSuccess(e) {
      console.log('上传成功', e);
      if (e.code == 1) {
        this.banurl.push(e.data.url);
        this.urls.push(e.data.fullurl);
      } else {
        uni.showToast({
          title: e.msg
        });
      }
    },
    fabuDongtai() {
      this.http('/dynamic/add', {
        content: this.content,
        images: this.banurl.join(),
        address: this.address
      }).then((res) => {
        if (res.code == 1) {
          uni.showToast({
            title: `已提交\n审核状态可在我的动态中查询`,
            icon: 'none',
            success: () => {
              setTimeout(() => {
                uni.navigateBack();
              }, 1500);
            }
          });
        } else {
          uni.showToast({
            title: res.msg
          });
        }
      });
    },
    getLocation(obj, address, name) {
      uni.chooseLocation({
        success: (res) => {
          console.log(res);
          this.addres = res.address;
          var locationObj = formatLocation(res);
          obj[address] = locationObj.REGION_PROVINCE + ' ' + locationObj.REGION_CITY + ' ' + locationObj.REGION_COUNTRY;
          obj[name] = locationObj.ADDRESS;
          console.log('截取', obj);
          this.address = obj.area_id;
        },
        fail: function () {}
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  padding: 0rpx 30rpx;
  .txt {
    box-sizing: border-box;
    padding: 24rpx;
    width: 690rpx;
    height: 340rpx;
    background: #f8f8f8;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    font-weight: 400;
    font-size: 28rpx;
    color: #666666;
  }
  .address {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24rpx;
    border-top: 2rpx solid #e8e8e8;
    border-bottom: 2rpx solid #e8e8e8;
    margin-top: 64rpx;
  }
}
.btn {
  box-sizing: border-box;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 750rpx;
  height: 156rpx;
  background: #ffffff;
  box-shadow: 0rpx -4rpx 12rpx 2rpx rgba(0, 0, 0, 0.12);
  padding: 8rpx 30rpx;
  z-index: 99;
  .creatact {
    width: 690rpx;
    height: 80rpx;
    text-align: center;
    line-height: 80rpx;
    background: #feff01;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
  }
}
</style>
